<template>
  <scroll class="listview" @scroll="scroll" :needEmitScroll="needEmitScroll" :probeType="probeType" ref="refScroll">
    <ul>
      <li v-for="group in data" :key="group.title" class="list-group" ref="refGroup">
        <div class="list-group-title">{{group.title}}</div>
        <ul>
          <li @click="selectItem(item)"  v-for="item in group.items" :key="item.id" class="list-group-item">
            <img class="avatar" :src="item.avatar">
            <div class="name">{{item.name}}</div>
          </li>
        </ul>
      </li>
    </ul>
    <div class="shortcart">
      <ul>
        <li v-for="(item, index) in shortcartlist" class="shortcart-title" :data-index="index" :key="index"
          @touchstart.stop="shortcartTouchStart"
          @touchmove.stop="shortcartTouchMove"
          @touchend.stop="shortcartTouchEnd"
          :class="{ active: currentIndex === index }"
        >{{item}}</li>
      </ul>
    </div>
    <div class="title-fixed" v-show="fixedTitle" ref="refTitleFixed">{{fixedTitle}}</div>
  </scroll>
</template>

<script type="text/ecmascript-6">
import Scroll from '@/base/scroll/scroll'
import { getData } from '@/common/js/dom'

const ANCHOR_HEIGHT = 18
const TITLE_HEIGHT = 30

export default {
  components: {
    Scroll
  },
  name: 'listview',
  data() {
    return {
      needEmitScroll: true,
      probeType: 3,
      currentIndex: 0,
      groupHeightList: [],
      timer: null,
      needTranslateY: 0
    }
  },
  props: {
    data: {
      type: Array,
      /* eslint-disable */
      default: []
    }
  },
  computed: {
    shortcartlist() {
      return this.data.map((item) => {
        return item.title
      })
    },
    fixedTitle() {
      if (!this.shortcartlist) return ''
      return this.shortcartlist[this.currentIndex]
    }
  },
  methods: {
    refresh() {
      this.$refs.refScroll.refresh()
    },
    selectItem(item) {
      this.$emit('select', item)
    },
    scroll(pos) {
      let posY = pos.y
      if (posY > 0) {
        this.currentIndex = 0
        return
      }
      let groupHeightList = this.groupHeightList
      let needTransformY = 0
      let height1 = 0
      let height2 = 0
      for(let i = 0; i < groupHeightList.length; i++) {
        height1 = groupHeightList[i]
        height2 = groupHeightList[i + 1]
        if (posY <= (-height1) && posY > (-height2)) {
          this.currentIndex = i
          // 确认下一个Title的顶部距离 Scroll顶部的距离
          let nextTitleStart = height2
          if (posY > (-nextTitleStart) && posY < (-nextTitleStart + TITLE_HEIGHT)) {
            needTransformY = TITLE_HEIGHT - Math.abs(-nextTitleStart - posY)
          } else {
            needTransformY = 0
          }
          // 如果找到，直接结束循环
          break
        }
      }
      if (!height2) {
        this.currentIndex = groupHeightList.length - 1
      }
      this.$refs.refTitleFixed.style.transform = `translateY(-${needTransformY}px)`

      // let posY = -pos.y
      // // 调整 title-fixed的位置
      // if (posY < 0 ) {
      //   this.currentIndex = 0
      //   return
      // }
      // let groupHeightList = this.groupHeightList
      // for(let i = 0; i < groupHeightList.length; i++) {
      //   let height1 = groupHeightList[i]
      //   let height2 = groupHeightList[i + 1]
      //   // 计算下一个区间 开始位置距离 top 有多少距离了
      //   if (height2) {
      //     // posY
      //     let nextTitleStart = height2
      //     let nextTitleEnd = height2 - TITLE_HEIGHT
      //     let needTranslateY = 0
      //     if ( posY > nextTitleEnd && posY <= nextTitleStart ) {
      //       needTranslateY =  posY - nextTitleEnd
      //     } else {
      //       needTranslateY = 0
      //     }
      //     this.$refs.refTitleFixed.style.transform = `translateY(-${needTranslateY}px)`
      //   }
      //   if ((posY >= height1 && posY < height2) || !height2 ) {
      //     this.currentIndex = i
      //     break
      //   }
      // }
    },
    shortcartTouchStart(e) {
      this.touch.touchFlag = true
      this.touch.startTouchPageY = e.touches[0].pageY
      let index = getData(e.target, 'index')
      this.touch.startTouchIndex = index
      // 滚动到指定位置
      this._scrollToElement(index)
    },
    shortcartTouchMove(e) {
      if (!this.touch.touchFlag) return
      this.touch.endTouchPageY = e.touches[0].pageY
      // 计算从第一次开始touch滚动的距离
      let subIndex = parseInt((this.touch.startTouchPageY - this.touch.endTouchPageY)/ANCHOR_HEIGHT)
      let targetMoveIndex = parseInt(this.touch.startTouchIndex) - parseInt(subIndex)
      this._scrollToElement(targetMoveIndex)
    },
    shortcartTouchEnd() {
      this.touch.touchFlag = false
    },
    _scrollToElement(index) {
      index = parseInt(index)
      if (index < 0) index = 0
      if (index > (this.data.length -1)) {
        index = this.data.length -1
      }
      this.currentIndex = index
      let targetTitle = this.$refs.refGroup[index]
      this.$refs.refScroll.scrollToElement(targetTitle)
    }
  },
  created() {
    this.touch = {}
    this.touch.touchFlag = false
    this.touch.startTouchIndex = 0
    this.touch.startTouchPageY = null
    this.touch.endTouchPageY = null
  },
  watch: {
    data() {
      // 计算 groupHeightList的高度
      this.$nextTick(() => {
        let height = 0
        let tmpArr = []
        tmpArr.push(height)
        setTimeout(() => {
          this.$refs.refGroup.forEach((item) => {
            height += item.clientHeight
            tmpArr.push(height)
          })
          this.groupHeightList = tmpArr
        }, 30)
      })
      // this.$nextTick(() => {
      //   let height = 0
      //   let tmpArr = []
      //   tmpArr.push(height)
      //   this.$refs.refGroup.forEach((item) => {
      //     height += item.clientHeight
      //     tmpArr.push(height)
      //   })
      //   this.groupHeightList = tmpArr
      //   console.log(tmpArr)
      // })
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~common/stylus/variable"

.listview
  position: relative
  width: 100%
  height: 100%
  overflow: hidden
  background: $color-background
  .list-group
    padding-bottom: 30px
    .list-group-title
      height: 30px
      line-height: 30px
      padding-left: 20px
      font-size: $font-size-small
      color: $color-text-l
      background: $color-highlight-background
    .list-group-item
      display: flex
      align-items: center //
      padding: 20px 0 0 30px
      .avatar
        width: 50px
        height: 50px
        border-radius: 50%
      .name
        margin-left: 20px
        color: $color-text-l
        font-size: $font-size-medium
  .shortcart
    position: absolute
    top: 50%
    right: 0
    padding: 10px 0px
    transform: translateY(-50%)
    .shortcart-title
      font-size: $font-size-small // 12px
      line-height: 1 // 1:1比例 字体大小的行高
      padding: 3px 6px 3px 10px // 接触总高度 12+3+3=18px
      color: $color-text-l
      background: rgba(255, 255, 255, 0.2)
      &.active
        color: $color-theme
  .title-fixed
    position: absolute
    left: 0
    right: 0
    top: -1px
    height: 30px
    line-height: 30px
    padding-left: 20px
    font-size: $font-size-small
    color: $color-text-l
    background: $color-highlight-background
    // transform: translateY(-15px)
</style>
